<template>
  <div class="header">
    <a-form layout="inline" class="form">
      <a-form-item label="账户状态">
        <a-select v-model:value="search.status" style="width: 120px;">
          <a-select-option :value="option.value" v-for="option in statusList" :key="option.value">{{ option.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="地区">
        <a-select v-model:value="search.provinceId" style="width: 100px;">
          <a-select-option :value="option.id" v-for="option in provinceList" :key="option.id">{{ option.name }}</a-select-option>
        </a-select>
        <a-select v-model:value="search.cityId" style="width: 100px;margin-left: 8px;">
          <a-select-option :value="option.id" v-for="option in cityList" :key="option.id">{{ option.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="科室">
        <a-select v-model:value="search.departmentId" style="width: 100px;">
          <a-select-option :value="option.id" v-for="option in departmentList" :key="option.id">{{ option.name }}</a-select-option>
        </a-select>
        <a-select v-model:value="search.subId" style="width: 100px;margin-left: 8px;">
          <a-select-option :value="option.id" v-for="option in subList" :key="option.id">{{ option.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="职称">
        <a-select v-model:value="search.titleId" style="width: 120px;">
          <a-select-option :value="option.id" v-for="option in titleList" :key="option.id">{{ option.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="行政职称">
        <a-select v-model:value="search.levelId" style="width: 120px;">
          <a-select-option :value="option.id" v-for="option in levelList" :key="option.id">{{ option.name }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="注册时间">
        <a-range-picker v-model:value="search.registerDate" />
      </a-form-item>
      <a-form-item label="注册渠道">
        <a-select v-model:value="search.source" style="width: 120px;">
          <a-select-option :value="option.value" v-for="option in sourceList" :key="option.value">{{ option.label }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="会员ID">
        <a-input v-model:value="search.memberId" placeholder="输入会员ID" />
      </a-form-item>
      <a-form-item label="手机号">
        <a-input v-model:value="search.mobile" placeholder="输入手机号" />
      </a-form-item>
      <a-form-item label="姓名">
        <a-input v-model:value="search.name" placeholder="输入姓名" />
      </a-form-item>
      <a-form-item label="推荐人手机号">
        <a-input v-model:value="search.sharerMobile" placeholder="输入推荐人手机号" />
      </a-form-item>
      <a-form-item label="参与项目ID">
        <a-input v-model:value="search.tid" placeholder="输入参与项目id" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getTableData">查询</a-button>
        <a-button @click="onReset" class="btn">重置</a-button>
        <a-button type="success" class="btn" @click="onExport">导出</a-button>
      </a-form-item>
    </a-form>
  </div>
  <TablePage 
    :dataSource="dataSource"
    :columns="columns" 
    :paginationData="paginationData"
    @change="pageChange"
    @showSizeChange="showSizeChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'createTime'">
        {{proxy.$filters.formatDate(record.createTime)}}
      </template>
      <template v-else-if="column.dataIndex === 'lastActiveTime'">
        {{proxy.$filters.formatDate(record.lastActiveTime)}}
      </template>
      <template v-else-if="column.dataIndex === 'province'">
        {{ record.province }} {{ record.city }}
      </template>
      <template v-else-if="column.dataIndex === 'actions'">
        <a type="link" @click="onDetail(record)">查看/审核</a>
        <a type="link" class="btn" @click="onComplete(record)">参与记录</a>
        <a type="link" class="btn" @click="onJifen(record)">积分记录</a>
        <a type="link" class="btn" @click="onRecommend(record)">推荐记录</a>
      </template>
    </template>
  </TablePage>
</template>

<script setup>
import { useRouter } from 'vue-router'
import TablePage from "@/components/TablePage/index.vue"
import { usePagination } from "@/useHooks/usePagination"
import { memberList } from '@/api/user';
import { profile } from '@/api/survey';
import { downloadFile } from '@/utils/index'
import { reactive, ref, watch, onMounted, computed } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const statusList = ref([
  {label: '全部',value: null},
  { label: '待审核', value: 2 },
  { label: '已认证', value: 1 },
  { label: '未认证', value: 0 },
  { label: '已拉黑', value: -1 },
  { label: '审核拒绝', value: -2 }
])
const sourceList = ref([
  { label: '全部', value: null },
  { label: '公众号', value: 1 },
  { label: '网页', value: 2 },
  {label: 'APP', value: 3}
])
const provinceList = ref([])
const cityList = computed(() => {
  if (!search.provinceId) return []
  search.cityId = null
  return provinceList.value.find(i => i.id === search.provinceId).list
})
const departmentList = ref([])
const subList = computed(() => {
  if (!search.departmentId) return []
  search.subId = null
  return departmentList.value.find(i => i.id === search.departmentId).list
})
const levelList = ref([])
const titleList = ref([])
onMounted(() => {
  profile().then(res => {
    res.data.forEach(item => {
      if (item.id === 11) departmentList.value = item.list
      if (item.id === 10) titleList.value = item.list
      if (item.id === 9) levelList.value = item.list
      if (item.id === 158) provinceList.value = item.list
    })
  })
  getTableData()
})
const router = useRouter()
const dataSource= ref([])
const columns = computed(() => {
  const arr = [
    {
      title: '会员ID',
      dataIndex: 'id',
      width: 120
    },
    {
      title: '姓名',
      dataIndex: 'realname',
      width: 120
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      width: 120
    },
    {
      title: '科室',
      dataIndex: 'departmentName',
      width: 160
    },
    {
      title: '地区',
      dataIndex: 'province',
      width: 160
    },
    {
      title: '推荐人',
      dataIndex: 'sharerName',
      width: 120
    },
    {
      title: '账户余额',
      dataIndex: 'balance',
      width: 100
    },
    {
      title: '审核中积分',
      dataIndex: 'reviewAmount',
      width: 120
    },
    {
      title: '注册渠道',
      dataIndex: 'sourceDes',
      width: 100
    },
    {
      title: '注册时间',
      dataIndex: 'createTime',
      width: 120
    },
    {
      title: '最后活跃',
      dataIndex: 'lastActiveTime',
      width: 120
    },
    {
      title: '账户状态',
      dataIndex: 'statusDes',
      width: 120
    },
    {
      title: '操作',
      dataIndex: 'actions',
      width: 300,
      fixed: 'right'
    }
  ]
  return arr;
})
const search = reactive({
  status: null,
  cityId: null,
  departmentId: null,
  subId: null,
  levelId: null,
  tid: undefined,
  mobile: undefined,
  memberId: undefined,
  name: undefined,
  provinceId: null,
  registerDate: [],
  sharerMobile: undefined,
  source: null,
  titleId: null
})
const onReset = () => {
  search.status = null
  search.cityId = null
  search.departmentId = null
  search.subId = null
  search.levelId =null
  search.tid=undefined
  search.mobile = undefined
  search.name = undefined
  search.memberId = undefined
  search.provinceId = null
  search.registerDate = []
  search.sharerMobile = undefined
  search.source = null
  search.titleId = null
  getTableData()
}
const { paginationData, pageChange, showSizeChange } = usePagination()
watch(paginationData, () => {
  getTableData()
})
const getTableData = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  if (Array.isArray(req.registerDate) && req.registerDate.length >= 2 && req.registerDate[0] && req.registerDate[1]) {
    req.registerStartDate = req.registerDate[0].format('YYYY-MM-DD')
    req.registerEndDate = req.registerDate[1].format('YYYY-MM-DD')
  }
  if (req.subId) {
    req.departmentId = req.subId
  }
  delete req.subId
  delete req.registerDate
  memberList(req).then((res) => {
    paginationData.total = res.data.total
    dataSource.value = res.data.list.map(item => ({
      ...item,
      statusDes: statusList.value.find(i => i.value === item.status).label,
      sourceDes: item.source ? sourceList.value.find(i => i.value === item.source).label : ''
    }))
  })
}
const onExport = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  if (Array.isArray(req.registerDate) && req.registerDate.length >= 2 && req.registerDate[0] && req.registerDate[1]) {
    req.registerStartDate = req.registerDate[0].format('YYYY-MM-DD')
    req.registerEndDate = req.registerDate[1].format('YYYY-MM-DD')
  }
  if (req.subId) {
    req.departmentId = req.subId
  }
  delete req.subId
  delete req.registerDate
  downloadFile('/member/list/export',req)
}
const onDetail = (record) => {
  router.push(`/user/user/detail?id=${record.id}`)
}
const onComplete = (record) => {
  router.push(`/record/complete?memberId=${record.id}`)
}
const onJifen = (record) => {
  router.push(`/record/jifen?memberId=${record.id}`)
}
const onRecommend = (record) => {
  router.push(`/record/recomment?memberId=${record.id}`)
}
</script>